<script setup lang="ts">
  import { queryServicePlanList } from '@/api-new2/service/service-plan';
  import { useForm } from '@/hooks/arco/useForm';
  import { usePaginationTable } from '@/hooks/arco/usePaginationTable';
  import { watch } from 'vue';

  const props = defineProps<{
    elderId: string;
  }>();

  const emit = defineEmits(['next']);

  const form = useForm({
    state: {
      startTime: '',
      endTime: '',
    },
    rules: {
      startTime: [{ required: true, message: '请选择计划生效时间' }],
      endTime: [{ required: true, message: '请选择计划失效时间' }],
    },
  });

  const pageTable = usePaginationTable({
    apiFun: queryServicePlanList,
    getQueryParams() {
      return {
        elderId: props.elderId,
      };
    },
    columns: [
      {
        title: '计划时间',
        dataIndex: 'planTame',
        slot: 'planTime',
      },
      {
        title: '计划状态',
        dataIndex: 'planStatusName',
      },
      {
        title: '计划进度',
        dataIndex: 'completionProgress',
      },
    ],
  });

  watch(
    () => form.state,
    async () => {
      try {
        await form.validate();

        emit('next', {
          key: 'time',
          value: {
            startTime: form.state.startTime,
            endTime: form.state.endTime,
          },
        });
      } catch (error) {
        console.error('表单验证失败:', error);
        emit('next', false);
      }
    },
    { deep: true }
  );
</script>

<template>
  <div class="col w-[700px] self-center mt-[20px] flex-1">
    <a-form v-bind="form.bindProps" label-align="left">
      <a-form-item label="计划生效时间" field="startTime">
        <a-date-picker
          v-model="form.state.startTime"
          placeholder="请选择计划生效时间（包含所选时间）"
          class="w-full"
        />
      </a-form-item>
      <a-form-item label="计划失效时间" field="endTime">
        <a-date-picker
          v-model="form.state.endTime"
          placeholder="请选择计划失效时间（包含所选时间）"
          class="w-full"
        />
      </a-form-item>
    </a-form>

    <a-divider />

    <h3>以下为客户的全部服务计划</h3>

    <a-table class="mt-[10px]" v-bind="pageTable.bindProps">
      <template #planTime="{ record }">
        <span>{{ record.startTime }}~{{ record.finishedTime }}</span>
      </template>
    </a-table>
  </div>
</template>

<style lang="less" scoped></style>
